{% extends "base.html" %}
{% block css %}
<style>
.skill-count {color: #707070; font-size: 12px; vertical-align: baseline}
</style>
{% endblock %}
{% block container %}
<div class="page-header" style="margin-bottom: 18px; height: 52px; padding-bottom: 0px;">
    <ul class="nav nav-pills pull-left">
        <li class="active"><a href="#">一天</a></li>
        <li><a href="#">一周</a></li>
        <li><a href="#">一月</a></li>
        <li><a href="#">六月</a></li>
        <li><a href="#">所有</a></li>
        <li><a href="#">关注</a></li>
    </ul>
    <input class="input-small" style="float: left; margin-left: 50px; margin-right: 2px" type="text" maxlength="10" name="skills" id="id_skills_s" placeholder="寻找特定技能">
    <button id="id_skills_s_submit" class="btn hide" type="submit">确定</button>
</div>
<div class="row">
    <div class="span7">
        <div style="margin-left: 30px">
            <a href="https://gravatar.com/"><img class="avatar" src="https://gravatar.com/avatar/{{ userprofile.imgurl }}?s=40"/></a>
            <div>
                <span style="font-size: 20px; font-weight: 400">{{ user.username }}
                {% if userprofile.nickname %}
                    ({{ userprofile.nickname }})
                {% endif %}
                </span>
            </div>
            <div style="margin-left: 30px">
                {% for i in kk %}
                {% if i == 4 or i == 8 %}
                <div class="pull-left" style="clear: both; margin: 4px">
                {% else %}
                <div class="pull-left" style="margin: 4px">
                {% endif %}
                    <a href=""><strong style="font-size: 16px">+</strong></a>
                    <span class="label skills">linux</span><span class="skill-count"> x51</span>
                </div>
                {% endfor %}
                <form style="clear: both; padding-top: 3px" class="form-inline" action="/{{user.username}}/skills/" method="post">
                    {% csrf_token %}
                    {{ skillsForm.skills }}
                    <button id="id_skills_submit" class="btn hide" type="submit">确定</button>
                    <p id="id_skills_tip" class="hide muted" style="margin-top: 5px">
                    多个技能使用逗号分割，不需要“高级”，“资深”等等形容词</p>
                </form>
            </div>
            <div>
                <h4 style="margin-bottom: 8px; font-weight: normal; color: #999999;">最近评价:</h4>
                {% for i in kk %}
                <div style="margin-left: 30px">
                    <div class="muted">
                        <a href="/cloudzhou/">cloudzhou</a> 认为 <a href="/cloudzhou/">cloudzhou</a> 擅长:
                    </div>
                    <p style="margin-left: 60px">
                        <a href=""><span class="label skills">linux</span></a>
                        <a href=""><span class="label skills">linux</span></a>
                    </p>
                </div>
                {% endfor %}
                <h4 style="margin-bottom: 8px; font-weight: normal; color: #999999;">评价给:</h4>
                {% for i in kk %}
                <div style="margin-left: 30px">
                    <div class="muted">
                        <a href="/cloudzhou/">cloudzhou</a> 认为 <a href="/cloudzhou/">cloudzhou</a> 擅长:
                    </div>
                    <p style="margin-left: 60px">
                        <a href=""><span class="label skills">linux</span></a>
                        <a href=""><span class="label skills">linux</span></a>
                    </p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="span5">
        <div>
            <h4 style="margin-bottom: 8px; font-weight: normal; color: #999999;">热门技能:</h4>
            {% for i in kk %}
            <div class="pull-left" style="margin: 4px">
                <a href=""><span class="label label-important skills">linux</span><span class="skill-count"> x1151</span></a>
            </div>
            {% endfor %}
    </div>
        <div style="clear: both;">
            <h4 style="padding-top: 8px; padding-bottom: 8px; font-weight: normal; color: #999999;">最新:</h4>
            <blockquote>
                {% for i in kk %}
                <div>
                    <div class="muted">
                        <a href="/cloudzhou/">cloudzhou</a> 认为 <a href="/cloudzhou/">cloudzhou</a> 擅长:
                    </div>
                    <p style="margin-left: 60px">
                        <a href=""><span class="label skills">linux</span></a>
                        <a href=""><span class="label skills">linux</span></a>
                    </p>
                </div>
                {% endfor %}
            </blockquote>
        </div>
    </div>
</div>
{% endblock %}
{% block js %}
<script>
/*global jQuery, window */
$(function(){
    $('.c_repo').hover(function() {
        $(this).css('background-color', '#D9EDF7');
    }, function(){
        $(this).css('background-color', '#FFFFFF');
    });
    $('.c_repo').tooltip({
      selector: "a[rel=tooltip]"
    });
    $('#id_skills_s').click(function() {
        $('#id_skills_s_submit').show();
    });
    $('#id_skills').click(function() {
        $('#id_skills_submit').show();
        $('#id_skills_tip').show();
    });
    $('#id_skills').addClass('span2');
});
</script>
{% endblock %}
